<template>
  <div class="index">
    <Header />
    <div class="view">
      <img src="/images/Index/banner.jpg" class="background block md-hide" alt="智慧明医官网">
      <img src="/images/Index/banner-mobile.jpg" class="background hide md-show" alt="智慧明医官网">
      <div class="science-cont pt-25 pb-25">
        <div class="cont">
          <div class="hot-science">
            <div class="title flex pt-25 item-center">
              <i class="icon-title font-18" />
              <h4 class="font-24">
                热门科普
              </h4>
              <router-link to="/science" class="font-16 more flex item-center">
                更多<i class="icon-more font-12 block mt-2" />
              </router-link>
            </div>
          </div>
          <div class="science oh pt-20 pb-20">
            <div v-for="item in article" class="science-list fl row-3 row-md-6 row-md-6 row-xs-6 pad-10">
              <router-link :to="{path:'/science/details',query:{id:item.id}}" class="flex item-center">
                <div class="bg-white radius-5 oh row-12">
                  <img class="row-12 block" :src="item.image ? item.image.path : notImage " :alt="item.title">
                  <div class="pad-10">
                    <h4 class="text-cut font-18">
                      {{ item.title }}
                    </h4>
                    <p class="text-cut introduce font-16 mt-5">
                      {{ item.introduce }}
                    </p>
                    <div class="amount flex item-center just-auto mt-10">
                      <p class="font-16">
                        {{ item.create_time }}
                      </p>
                      <p class="font-16">
                        浏览量：{{ item.read }}
                      </p>
                    </div>
                  </div>
                </div>
              </router-link>
            </div>
          </div>
        </div>
      </div>
      <div class="qaproblem-cont bg-white pb-20 pt-25">
        <div class="cont">
          <div class="hot-science">
            <div class="title flex pt-25 item-center">
              <i class="icon-title font-18" />
              <h4 class="font-24">
                热门回答
              </h4>
              <router-link to="/exports" class="font-16 more flex item-center">
                更多<i class="icon-more font-12 block mt-2" />
              </router-link>
            </div>
          </div>
          <div class="qaproblem oh pt-10">
            <div class="row-9 fl row-sm-12 oh pr-20">
              <div v-for="item in qaproblem" class="qaproblem-list fl row-12 pr-20 mt-20 pb-25 db">
                <router-link :to="{path:'/exports/details',query:{id:item.id}}" class="flex item-center">
                  <div class="export-head-info">
                    <img class="block pr-50 auto" :src="item.answers[0].doctorinfo.img ? item.answers[0].doctorinfo.img.imgurl : notImage " :alt="item.content">
                    <p class="font-16 mt-8">
                      {{ item.answers[0].doctorinfo.name }}/{{ item.answers[0].doctorauth.thetitle }}
                    </p>
                  </div>
                  <div class="export-QAcont">
                    <p class="text-cut font-20 mt-10">
                      问：{{ item.content }}
                    </p>
                    <p class="text-cut font-18 mt-15">
                      答：{{ item.answers[0].answer }}
                    </p>
                    <div class="mt-17 patients-info row-12">
                      <span>#肿瘤</span>
                      <span style="margin-left: 5%;">#{{ item.sex.tip }}</span>
                      <span style="margin-left: 5%;">#{{ item.age }}岁</span>
                      <span style="margin-left: 10%;">{{ item.create_time }}</span>
                    </div>
                  </div>
                </router-link>
              </div>
            </div>
            <div class="export-QRcode flex just-center item-center fl row-sm-12 row-3 radius-5 mt-10">
              <div class="tc">
                <p class="font-16">
                  专家回答服务号二维码
                </p>
                <img class="block row-10" src="/images/Index/QRcode.jpg" alt="微信扫描上面的二维码，进行免费提问">
                <p class="font-16 tl lh-25" style="padding-left: 13%">
                  微信扫描上面的二维码，<br>进行免费提问
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="hot-exports pt-25 pb-25">
        <div class="cont">
          <div class="title flex pt-25 item-center">
            <i class="icon-title font-18" />
            <h4 class="font-24">
              热门专家
            </h4>
            <router-link to="/reserve" class="font-16 more flex item-center">
              更多<i class="icon-more font-12 block mt-2" />
            </router-link>
          </div>
          <div class="exports oh mt-10">
            <div v-for="item in doctor" class="exports-list fl row-3 row-md-6 row-md-6 row-xs-6 pad-10">
              <router-link :to="{path:'/reserve/details',query:{id:item.id}}">
                <div class="bg-white pb-10 radius-5 oh">
                  <img class="block row-12 " :src="item.img ? item.img.imgurl : notImage " :alt="item.name + '专家'">
                  <div class="pl-15 pr-15 pt-15 text-cut">
                    <h4 class="font-20 tc">
                      {{ item.name }}<span class="font-16">/{{ item.userauth.thetitle }}</span>
                    </h4>
                    <p class="tc font-18 text-cut">
                      {{ item.uservisits.branch }}
                    </p>
                    <p class="tc font-18 text-cut">
                      擅长：{{ item.uservisits.attending.title }}
                    </p>
                    <button class="exportCont row-12 text-white radius-5 font-18 mt-10">
                      查看简介
                    </button>
                  </div>
                </div>
              </router-link>
            </div>
          </div>
        </div>
      </div>
      <div class="serve bg-white pt-25 pb-25">
        <div class="cont">
          <div class="title flex pt-25 item-center">
            <i class="icon-title font-18" />
            <h4 class="font-24">
              服务简介
            </h4>
          </div>
          <div class="list oh mt-10">
            <div class="serves-list fl flex just-center row-4 row-md-6 row-sm-12">
              <div class="center tc">
                <i class="icon-doctor" />
                <h4 class="font-20 mt-15">
                  免费问医生
                </h4>
                <p class="tl font-18 mt-10">
                  日常健康问题，养生禁忌，不用去医院了。智慧明医“免费问医生”服务，有来自全国各地的专业明医，为您免费解答治疗、康复过程中的疑问。
                </p>
              </div>
            </div>
            <div class="serves-list fl flex just-center row-4 row-md-6 row-sm-12">
              <div class="center tc">
                <i class="icon-hospital" />
                <h4 class="font-20 mt-15">
                  线上复诊
                </h4>
                <p class="tl font-18 mt-10">
                  复诊不用到院，线上即可直接与医生联系进行复诊，医生在线开方，药品直接快递到家，随时随地在线问诊，患者更方便，医生更省心。
                </p>
              </div>
            </div>
            <div class="serves-list fl flex just-center row-4 row-md-6 row-sm-12">
              <div class="center tc">
                <i class="icon-Stethoscope" />
                <h4 class="font-20 mt-15">
                  预约专家
                </h4>
                <p class="tl font-18 mt-10">
                  智慧明医为您提供北京、成都、昆明、济宁等地区的明医专家医院预约挂号，线上提前申请，线下直接就诊，解决挂号、看病难的问题。
                </p>
              </div>
            </div>
            <div class="serves-list fl flex just-center row-4 row-md-6 row-sm-12">
              <div class="center tc">
                <i class="icon-addParents" />
                <h4 class="font-20 mt-15">
                  加医生好友
                </h4>
                <p class="tl font-18 mt-10">
                  更多行业专家入驻智慧明医，线下扫码即可添加医生，医生审核通过后，即可成为医生的好友，线上选择医生服务后直接成为医生好友，随时随地方便复诊。
                </p>
              </div>
            </div>
            <div class="serves-list fl flex just-center row-4 row-md-6 row-sm-12">
              <div class="center tc">
                <i class="icon-science" />
                <h4 class="font-20 mt-15">
                  明医科普
                </h4>
                <p class="tl font-18 mt-10">
                  智慧明医定期邀请行业内知名中西医肿瘤医生，养生专家为患者进行线上直播讲座，患者可以通过智慧明医服务号报名或者查看相关的录播视频、音频、文章等等。
                </p>
              </div>
            </div>
            <div class="serves-list fl flex just-center row-4 row-md-6 row-sm-12">
              <div class="center tc">
                <i class="icon-patients" />
                <h4 class="font-20 mt-15">
                  患友群
                </h4>
                <p class="tl font-18 mt-10">
                  全国各地不同病种的患者齐聚群内，定期直播讲座、专家面对面、免费挂号等等福利活动，患者互助，共战病魔。
                </p>
              </div>
            </div>
          </div>
          <img class="block row-12 mt-20 xs-hide mb-25" src="/images/Index/add.jpg" alt="加入病友群">
          <img class="block row-12 mt-10 hide xs-show mb-10 pl-10 pr-10" src="/images/Index/add-mobile.png" alt="加入病友群">
        </div>
      </div>
      <div class="cooperation pb-25 pt-25">
        <div class="cont">
          <div class="title flex pt-25 item-center">
            <i class="icon-title font-18" />
            <h4 class="font-24">
              服务简介
            </h4>
          </div>

          <div class="swiper mt-20 oh post-r radius-10">
            <div class="wrapper flex" :style="{'transform': 'translateX(-' + translateY + 'px)'}">
              <div v-for="item in carousel" class="swiper-item">
                <a :href="item.url" target="_target">
                  <img class="block row-12" :src="item.image" :alt="item.title">
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import { Header, Footer } from '@/middleware/components'
import quest from '@/middleware/request'
import Cache from '@/middleware/function/Cache'
export default {
  components: {
    Header,
    Footer
  },
  beforeRouteLeave (to, from, next) {
    const doctor = {
      scrollTop: this.scrollTop,
      pageName: this.$route.name
    }
    // Cache.Storage.set(this.$route.name, JSON.stringify(doctor))
    next()
  },
  data () {
    return {
      // scrollTop: Cache.Storage.get(this.$route.name) ? JSON.parse(Cache.Storage.get(this.$route.name)).scrollTop : 0,
      article: [],
      notImage: require('../static/images/Public/notImage.png'),
      qaproblem: [],
      doctor: [],
      carousel: [
        {
          url: 'https://www.zyylmed.com',
          image: require('../static/images/AboutUS/zy.png'),
          title: '仲垣医疗'
        },
        {
          url: 'https://www.yingxiangqiao.com',
          image: require('../static/images/AboutUS/yxq.png'),
          title: '应象桥传媒'
        },

        {
          url: 'https://www.azjgy.com',
          image: require('../static/images/AboutUS/azj.png'),
          title: '北京爱之家公益服务中心'
        },
        {
          url: 'https://liuheyifang.com',
          image: require('../static/images/AboutUS/lh.png'),
          title: '六和医方生物制药'
        },
        {
          url: 'https://zhongliu-group.com',
          image: require('../static/images/AboutUS/zlys.png'),
          title: '忠医肿瘤医生集团'
        },
        {
          url: 'https://bjyft.com',
          image: require('../static/images/AboutUS/yft.png'),
          title: '京城御方堂'
        },
        {
          url: 'https://mingyikangyuan.com',
          image: require('../static/images/AboutUS/wzf.png'),
          title: '世界中医药联合学会肿瘤外治法专业委员会'
        }
      ],
      active: 0,
      translateY: 0,
      autoPlayer: null
    }
  },
  mounted () {
    // $(window).scroll(() => {
    //   const scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
    //   this.scrollTop = scrollTop
    // })
  },
  created () {
    this.sortRequest(this.getArticlelist())
    this.sortRequest(this.getQaproblem())
    this.sortRequest(this.getDoctorList())
    setTimeout(() => {
      this.Swiper()
    }, 100)
  },
  methods: {

    // 请求文章
    getArticlelist () {
      quest.getArticlelist(
        {
          page: 1,
          size: 4
        }).then((res) => {
        if (res.data.error_code == 0) {
          this.article = res.data.data.data
        }
      }
      )
    },

    // 请求专家问答
    getQaproblem () {
      quest.getQaproblem(
        {
          page: 1,
          size: 3
        }).then((res) => {
        if (res.data.error_code == 0) {
          this.qaproblem = res.data.data.data
        }
      }
      )
    },

    // 请求专家
    getDoctorList () {
      quest.getDoctorList(
        {
          page: 1,
          size: 4
        }).then((res) => {
        if (res.status == 200) {
          this.doctor = res.data.data.data
          this.$emit('loading', true)
          setTimeout(() => {
            const top = this.scrollTop
            // $(document).scrollTop(top)
          }, 200)
        }
      }
      )
    },

    Swiper () {
      this.autoPlayer = setInterval(() => {
        this.Control(true)
      }, 2000)
    },

    Control (type) {
      const imgWidth = $('.wrapper img').width() + ($(window).width() <= 768 ? 10 : 20)
      switch (type) {
        case true:
          if ($(window).width() <= 768) {
            this.active > this.carousel.length - 3 ? this.active = 0 : this.active++
          } else {
            this.active > this.carousel.length - 5 ? this.active = 0 : this.active++
          }
          break
        default:
          this.active < 1 ? this.active = this.carousel.length - 1 : this.active--
          break
      }
      this.translateY = this.active * imgWidth
    },

    select (type) {
      clearInterval(this.autoPlayer)
      this.Control(type)
    },

    // 加塞请求
    sortRequest () {
      new Promise((resolve) => {
        resolve('请求完成')
      })
    }
  }

}
</script>

<style scoped>
    .background{
        top: 0px;
        left: 0px;
        width: 100%;
        object-fit: cover;
        z-index: 0;
    }

    .icon-title{
        color: #e84931;
    }

    .science-cont,
    .hot-exports,
    .cooperation{
        background: #f5f6f9;
    }

    .introduce,
    .amount{
        color: #aeaeae;
    }

    .more{
        margin-left: auto;
    }

    .more:hover{
        color: #e84931;
    }

    .more:focus{
        color: #000;
    }

    .science-list a>div:hover,
    .exports-list a>div:hover{
        transform: scale(1.02);
        cursor: pointer;
    }

    .science-list img{
        height: 210px;
        object-fit: cover;
    }

    .export-head-info img{
        width: 80px;
        height: 80px;
    }

    .exports-list img{
        height: 300px;
        object-fit: cover;
    }

    .export-QAcont{
        width: calc(100% - 120px);
        margin-left: auto;
    }

    .patients-info{
        color: #aeaeae;
    }

    .qaproblem-list{
        border-bottom: 1px dashed #d3d3d3;
    }

    .qaproblem-list:hover .export-QAcont p:nth-child(1){
        color: #de3e3e;
    }

    .export-QRcode{
        padding: 44px 0px 104px 0px;
        border: 1px solid #eee;
    }

    .export-QRcode img{
        margin: 0 auto;
    }

    .exportCont{
        height: 40px;
        background: #e84931;
        border: none;
        cursor: pointer;
    }

    .exportCont:hover{
        box-shadow: 0px 0px 4px #e84931;
    }

    .serves-list{
        height: 400px;
        padding: 70px 50px 0px 50px;
    }

    .serves-list:nth-of-type(-n+3){
        border-bottom: 1px solid #eee;
    }

    .serves-list:nth-child(3n+2){
        border-left: 1px solid #eee;
        border-right: 1px solid #eee;
    }

    .serves-list i{
        font-size: 55px;
    }

    .serves-list p{
        color: #333;
    }

    .wrapper{
        width: 200%;
    }

    .swiper-item{
        width: calc(100% / 8.5);
        margin-left: 20px;
    }

    .swiper-item:nth-child(1){
        margin-left: 0px;
    }

    .swiper-item img{
        width: 100%;
        object-fit: cover;
    }

    .bullets{
        bottom: 0px;
    }

    .bullet-slide{
        width: 10px;
        height: 10px;
        background:var(--orange);
        cursor: pointer;
    }

    .bullet-slide.active{
        background: var(--red);
    }

    .select{
        top: 50%;
        left: 0px;
        width: 100%;
    }

    .select i{
        cursor: pointer;
        color: var(--white);
        font-size: 32px;
    }

    .select-right{
        transform: rotate(-180deg);
    }

    @media screen and (max-width:1024px) {
        .serves-list{
            border: none !important;
            border-bottom: 1px solid #eee !important;
        }

        .serves-list:nth-last-of-type(-n+2){
            border-bottom: none !important;
        }

        .serves-list:nth-child(odd){
            border-right: 1px solid #eee !important;
        }
    }

    @media screen and (max-width:768px) {

        .science-cont{
            padding-top: 0px;
        }

        .cont{
            padding-top: 0px;
        }

        .serves-list{
            border-bottom: 1px solid #eee !important;
        }

        .serves-list:nth-last-of-type(-n+2){
            border-bottom: 1px solid #eee !important;
        }

        .serves-list:nth-child(odd){
            border-right: none !important;
        }

        .serves-list:nth-last-child(1){
            border-bottom: none !important;
        }

        .wrapper{
            width: 350%;
        }

        .swiper-item{
            width: calc(100% / 4);
            margin-left: 10px;
        }
    }

    @media screen and (max-width:414px) {
        .science-cont,
        .qaproblem-cont,
        .hot-exports{
            padding: 0px;
        }

        .science{
            padding-top: 10px;
            padding-bottom: 0px;
        }

        .science-list img{
            height: 100px;
        }

        .qaproblem{
            padding: 0px 10px;
            padding-top: 10px;
        }

        .qaproblem>div{
            padding-right: 0px;
        }

        .qaproblem-list{
            padding-left: 10px;
            padding-right: 10px;
            padding-bottom: 15px;
            margin-top: 10px;
        }

        .qaproblem-list:nth-of-type(1){
            margin: 0px;
            padding-top: 0px;
        }

        .exports{
            padding: 0px 10px;
        }

        .exports-list img{
            height: 165px;
            object-fit: cover;
        }

        .export-QAcont{
            width: calc(100% - 100px);
            display: flex;
            flex-wrap: wrap;
            height: 105px;
        }

        .export-QAcont p{
            margin-top: 15px;
        }

        .export-QAcont p:nth-of-type(2){
            margin-top: -5px;
            color: #777;
        }

        .serve{
            padding-bottom: 0px;
        }

        .patients-info{
            display: flex;
            align-items: flex-end;
            justify-content: space-around;
            margin-top: auto;
        }
    }
</style>
